<style scoped lang="scss">
.app-container.home {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
}

// 测温仪统计面板
.temperature-machine-statistic {
  .item-circle {
    width: 100%;
    height: 50%;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    padding-top: 20%;

    .border-danger {
      border: 8px solid rgba(253, 131, 111, 1);
    }
    .border-success {
      border: 8px solid rgba(43, 241, 236, 1);
    }

    .value {
      width: 50%;
      padding: 14% 0;
      border-radius: 50%;
      margin: 0 auto;
    }
    .label {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      margin-top: 5px;
    }
  }
}
</style>
<template>
  <div class="app-container home">
    <!-- 地图作为背景图 -->
    <AMapBg :markerType="'school'">
      <template slot="mapRightCenterContainer">
        <!-- 体温检测次数汇总 -->
        <BigDataCard
          :width="'340px'"
          :height="'auto'"
          :mainTitle="'学校数据汇总'"
        >
          <template slot="rectangleContent">
            <el-row style="display: flex; margin-bottom: 10px">
              <BigDataCircle
                :type="'primary'"
                :width="'115px'"
                :value="56"
                :label="'学校总数'"
              />

              <div
                style="
                  height: 115px;
                  width: calc(100% - 115px);
                  flex: 1;
                  text-align: center;
                  color: rgba(255, 255, 255, 0.8);
                  display: flex;
                  flex-flow: column;
                  justify-content: center;
                  align-items: center;
                "
              >
                <el-row
                  >{{ currentTime.year }}年{{ currentTime.monthFormat }}月{{
                    currentTime.dayFormat
                  }}日</el-row
                >
                <el-row style="letter-spacing: 20px">
                  星期{{ currentTime.week }}
                  <!-- 很经典的计算星期几的方法 -->
                  <!-- {{'星期' + '日一二三四五六'.charAt(new Date().getDay())}} -->
                </el-row>
              </div>
            </el-row>

            <!-- <el-row class="statistic-row">
              <el-col
                style="color: rgba(43, 241, 236, 1)"
                class="label"
                :span="10"
                >累计检测体温：</el-col
              >
              <el-col class="value" :span="10">8,078,988 次</el-col>
            </el-row>

            <el-row class="statistic-row">
              <el-col
                style="color: rgba(252, 94, 61, 1)"
                class="label"
                :span="10"
                >累计异常体温：</el-col
              >
              <el-col class="value" :span="10">76次</el-col>
            </el-row> -->
          </template>
        </BigDataCard>
      </template>
    </AMapBg>

    <!-- 左侧菜单栏 -->
    <BigDataLeftMenu :menuId="'school'" />

    <!-- 体温安全指数 -->
    <SafetyIndex ></SafetyIndex>
  </div>
</template>

<script>
import AMapBg from "@/views/bigData/components/AMapBg-1.vue";
import BigDataLeftMenu from "@/views/bigData/components/LeftMenu-1.vue";
import SafetyIndex from "@/views/bigData/components/common/SafetyIndex.vue";

import BigDataCard from "@/views/bigData/components/Card-1.vue";
import BigDataCircle from "@/views/bigData/components/Circle-1.vue";
import BigDataCard0 from "@/views/bigData/components/Card-0.vue";

import StackedHorizontalBar from "@/views/dashboard/diy/StackedHorizontalBar.vue";

export default {
  name: "BigDataStudent",
  components: {
    AMapBg,
    BigDataLeftMenu,
    SafetyIndex,
    BigDataCard,
    BigDataCircle,
    BigDataCard0,
    StackedHorizontalBar,
  },
  data() {
    return {
      currentTime: this.$yhFunc.getCurrentTime(new Date()),
    };
  },
  created() {},
  methods: {},
};
</script>



